<template>
  <!-- 小模块公共组件 -->
  <div class="Mould-Box">
    <!-- 图表标题 -->
    <div class="Mould-Box-mintitle">
      <div class="charttitle">
        {{ chartTitle }}
      </div>
      <div class="line" />
      <div />
    </div>
    <!-- 图表 -->
    <div class="Mould-Box-chartBox" :style="{height:height}">
      <BarChart
        :data="datas"
        :color="chartOption.color"
        :unit="chartOption.unit"
        text="进尺"
      />
    </div>
  </div>
</template>

<script>
import BarChart from '@/components/chart/bar/BarChart.vue';
export default {
  name: 'MouldBob',

  components: {
    BarChart
  },
  props: {
    // 模块数据
    datas: {
      type: Array,
      required: true
    },
    chartOption: {
      type: Object,
      default: () => {}
    },
    chartTitle: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '10.125rem'
    }
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.Mould-Box{
    width: 20.625rem;
    &-mintitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
        .charttitle{
            font-size: 0.75rem;
            color: $light2Grey;
            margin-right: 0.3125rem;
        }
        .line{
            flex: 1;
            height: 0.0625rem;
            border-bottom: 0.0625rem dashed $darkGrey;
        }
    }
    &-chartBox{
      width: 100%;
    }
}
</style>
